<script lang="ts" setup>


import { Page, useVbenModal } from '@vben/common-ui'


import { useVbenForm } from '#/adapter/form'
import {message, Tag} from "ant-design-vue";
import {ref} from "vue";
import {GoodsPurchaseDel} from "#/api/goodsPurchase";

 const  goods_purchase_sns:any =ref([])

type EmitEvents = {
  close: [];
};
const emit = defineEmits<EmitEvents>();
const [Modal, modalApi] = useVbenModal({

  onCancel() {
    modalApi.close()
  },
  async onConfirm() {
    const values = await baseFormApi.getValues()
    console.log(values)

    const  params:any = {
      ids:goods_purchase_sns.value.map((value:any) => value.goods_purchase_id),
      delete_reason:values.delete_reason
    }
    modalApi.lock()
    await GoodsPurchaseDel(params).then((res:any)=>{
      if(res.data.code===0){

        message.error(res.data.msg)
        modalApi.unlock()
      }else {
        modalApi.close()
         emit('close')
      }
    })


  },
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return
    const { rowData } = modalApi.getData<Record<string, any>>()
    goods_purchase_sns.value=rowData

  },
})

const [BaseForm, baseFormApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  showDefaultActions: false,
  commonConfig: {
    // 在label后显示一个冒号
    colon: true,
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },

  layout: 'horizontal',
  schema: [
    {
      component: '',
      fieldName: '_divider',
      formItemClass: 'col-span-4',
      label:'已作废采购单'
    },
    {
      component: 'Textarea',
      fieldName: 'delete_reason',
      formItemClass: 'col-span-4',
      label:'作废原因'
    },
  ],
  wrapperClass: 'grid-cols-1',
})


function handleRemoveTag(index: number){
  // 创建新数组，排除要删除的项
  const goods_purchase = goods_purchase_sns.value.filter((_, i) => i !== index)

  // 更新响应式变量
  goods_purchase_sns.value = goods_purchase

  // 更新表单字段
  baseFormApi.setValues({
    purchase: goods_purchase,
  })

  // 显示成功提示
  message.success('采购单已移除')
}

</script>

<template>
  <Modal title="作废大货采购单">
    <Page content-class="flex flex-col gap-4" description="" title="">
      <BaseForm>
        <template #_divider>
          <div style="overflow-y: auto">
            <template  v-for="(item, index) in goods_purchase_sns" :key="index">
            <Tag  closable @close="handleRemoveTag(index)">
              {{ item.goods_purchase_sn}}
            </Tag>
            </template>
          </div>
        </template>
      </BaseForm>

    </Page>
  </Modal>
</template>

<style scoped>
/* 让 Form.Item 不再有默认 margin-bottom */
.mb-0 {
  margin-bottom: 0 !important;
}
</style>
